<template>
	<view>
		<view class="head">
			<image src="../../static/tabs/sit.png" mode="" @click="sit"></image>
			<view class="user">
				<image src="../../static/tabs/girl.jpg" mode=""></image>
				<view class="name_id">
					<text class="name">李天霸</text>
					<text class="id">ID：123456</text>
				</view>
			</view>
		</view>
		<view class="second">
			<view class="issue" @click="release">
				<text>{{releaseNumber}}</text>
				<text>发布</text>
			</view>
			<view class="like">
				<text>{{fabulousNumber}}</text>
				<text>点赞</text>
			</view>
			<view class="collect" @click="collect">
				<text>0</text>
				<text>收藏</text>
			</view>
		</view>
		<view class="indent">
			<view class="mine_indent">
				<text class="my_indent"><b>我的订单</b></text>
				<image src="../../static/tabs/jt.png" mode=""></image>
				<text class="our_indent" @click="allorders">全部订单</text>
			</view>
			<view class="indent_list">
				<view class="obligation" @click="daifukuan">
					<image src="../../static/tabs/obligation.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="receiving" @click="daishouhuo">
					<image src="../../static/tabs/send.png" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="completed" @click="yiwancheng">
					<image src="../../static/tabs/yes.png" mode=""></image>
					<text>已完成</text>
				</view>
				<view class="refunded" @click="yituikuan">
					<image src="../../static/tabs/refund.png" mode=""></image>
					<text>已退款</text>
				</view>
			</view>
		</view>
		<view class="Recommendedtools">
			<text><b>推荐工具</b></text>
		</view>
		<view class="Recommendedtoolslist"> 
			<view class="list">
				<view class="nav">
					<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
						<image :src="item.img" mode="" />
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	  selectReleaseShu,
	  selectFabulousShu,
	} from '../../api/customer/local'
	export default {
		data() {
			return {
				navs: [{
						img: '../../static/tabs/kf.svg',
						title: '客服中心',
						path: '/pages/mine_callcenter/mine_callcenter'
					},
					{
						img: '../../static/tabs/car-l.svg',
						title: '购物车',
						path: '/pages/mine_shopcar/mine_shopcar'
					},
					{
						img: '../../static/tabs/sqsh.svg',
						title: '申请售后',
						path: '/pages/mine_applyafter/mine_applyafter' 
					},
					{
						img: '../../static/tabs/djj.svg',
						title: '代金券',
						path: '/pages/mine_Kimsvolume/mine_Kimsvolume'
					},
					{
						img: '../../static/tabs/pj.svg',
						title: '我的评价',
						path: '/pages/mine_evaluate/mine_evaluate'
					},
					{
						img: '../../static/tabs/dz.svg',
						title: '地址管理',
						path: '/pages/mine_sitmanage/mine_sitmanage'
					},
					{
						img: '../../static/tabs/bz.svg',
						title: '保障服务',
						path: '/pages/Audit/Audit'
					},
					{
						img: '../../static/tabs/gywm.svg',
						title: '关于我们',
						path: '/pages/Mymerchant/Mymerchant'
					},
				],
			  //用户发布的信息数量
			  releaseNumber:0,
			  //用户点赞的数量
			  fabulousNumber:0,
			  //全部订单的下标
			  active:0,
			  
			}
		},
		//页面渲染前加载
		  created(){
			this.getSelectReleaseShu();
			this.getSelectFabulousShu();
		  },
		methods: {
			//设置页面点击事件
			sit(){
				uni.navigateTo({
					url:'/pages/mine_sit/mine_sit'
				})
			},
			//收藏页面点击事件
			collect(){
				uni.navigateTo({
					url:'/pages/mine_collect/mine_collect'
				})
			},
			//8个图标点击事件
			navItemClick(url) {
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			//全部订单页面
			allorders(){
				this.active = 0;
				sessionStorage.setItem('active',JSON.stringify(this.active));
				uni.navigateTo({
					url:'../mine_allorders/mine_allorders'
				})
			},
		    //用户的发布数量
			getSelectReleaseShu(){
			  selectReleaseShu().then((res)=>{
				  if(res.status==200){
					  this.releaseNumber = res.data;
				  }else{
					  this.releaseNumber = 0;
				  }
				console.log(JSON.stringify(res));
			  })
			},
		    //用户点赞的数量
			getSelectFabulousShu(){
			  selectFabulousShu().then((res)=>{
				  if(res.status==200){
					  this.fabulousNumber = res.data;
				  }else{
					  this.fabulousNumber = 0;
				  }
				console.log(JSON.stringify(res));
			  })
			},
			//去发布页面
			release(){
				uni.navigateTo({
					url:'/pages/MyRelease/MyRelease'
				})
			},
			//待付款
			daifukuan(){
				this.active = 1;
				sessionStorage.setItem('active',JSON.stringify(this.active));
				uni.navigateTo({
					url:'../mine_allorders/mine_allorders'
				});
			},
			//待收货
			daishouhuo(){
				this.active = 3;
				sessionStorage.setItem('active',JSON.stringify(this.active));
				uni.navigateTo({
					url:'../mine_allorders/mine_allorders'
				});
			},
			//已完成
			yiwancheng(){
				this.active = 4;
				sessionStorage.setItem('active',JSON.stringify(this.active));
				uni.navigateTo({
					url:'../mine_allorders/mine_allorders'
				});
			},
			//已退款
			yituikuan(){
				this.active = 5;
				sessionStorage.setItem('active',JSON.stringify(this.active));
				uni.navigateTo({
					url:'../mine_allorders/mine_allorders'
				});
			},
			
		}
	}
</script>

<style>
.head{
	width: 750rpx;
	height: 430rpx;
	overflow: hidden;
	background-color: #9b9a9a;
}
.head image{
	width: 50rpx;
	height:50rpx;
	float: right;
	margin: 20rpx;
}
.user{
	width: 350rpx;
	height: 200rpx;
	margin-top: 180rpx;
	margin-left: 30rpx;

}
.user image{
	width: 108rpx;
	height: 108rpx;
	border-radius: 50%;
	float: left;
	margin-top: 40rpx;
	border: 2rpx solid rgba(255, 255, 255, 100);
}
.name_id{
	width: 200rpx;
	height: 100rpx;
	float: left;
	display: flex;
	line-height: 50rpx;
	flex-direction: column;
	margin-top: 45rpx;

}
.name{
	color: rgba(255, 255, 255, 100);
	font-size: 40rpx;
	text-align: left;
}
.id{
	color: rgba(255, 255, 255, 100);
	font-size: 28rpx;
	text-align: left;
}
.second{
	width: 650rpx;
	height: 120rpx;
	line-height: 40rpx;
	border-radius: 20rpx;
	text-align: center;
	margin: 0 auto;
	display: flex;
	margin-top: -60rpx;
	background-color: #fff;
	box-shadow: 4rpx 2rpx 0rpx 0rpx rgba(170, 170, 170, 15);
	border: 2rpx solid rgba(255, 255, 255, 100);
}
.second text{
	margin-top: 10rpx;
	display: flex;
	color: rgba(16, 16, 16, 100);
	font-size: 28rpx;
	font-family: PingFangSC-regular;
	flex-direction: column;
}
.issue{
	width: 216rpx;
	height: 120rpx;

}
.like{
	width: 216rpx;
	height: 120rpx;

}
.collect{
	width: 216rpx;
	height: 120rpx;

}
.indent{
	width: 650rpx;
	height: 232rpx;
	line-height:40rpx;
	border-radius: 20rpx;
	text-align: center;
	margin: 0 auto;
	box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(170, 170, 170, 15);
	border: 1rpx solid rgba(255, 0, 0, 0);
}
.mine_indent {
	width: 650rpx;
	margin: 0 auto;
	height: 80rpx;
}
.mine_indent text{
	line-height: 80rpx;
}
.my_indent{
	color: rgba(16, 16, 16, 100);
	font-size: 16px;
	margin-left: 30rpx;
	font-family: PingFangSC-bold;
	float: left;
}
.our_indent{
	color: rgba(153, 152, 152, 100);
	font-size: 14px;
	text-align: left;
	font-family: PingFangSC-regular;
	float: right;
}
.mine_indent image{
	width: 40rpx;
	height:40rpx;
	margin-top: 18rpx;
	float: right;
}
.indent_list{
	width: 650rpx;
	height: 130rpx;
	display: flex;
}
.indent_list image{
	width: 60rpx;
	height: 60rpx;
	margin: 0 auto;
	margin-top: 10rpx;
}
.indent_list text{
	margin-top: 10rpx;
	color: rgba(153, 152, 152, 100);
	font-size: 26rpx;
	font-family: PingFangSC-regular;
}
.obligation{
	width: 162rpx;
	height: 130rpx;
	display: flex;
	flex-direction: column;
}
.receiving{
	width: 162rpx;
	height: 130rpx;
	display: flex;
	flex-direction: column;
}
.completed{
	width: 162rpx;
	height: 130rpx;
	display: flex;
	flex-direction: column;
}
.refunded{
	width: 162rpx;
	height: 130rpx;
	display: flex;
	flex-direction: column;	
}
.Recommendedtools{
	width: 600rpx;
	height: 100rpx;
	margin: 0 auto;
}
.Recommendedtools text{
	color: rgba(16, 16, 16, 100);
	font-size: 32rpx;
	text-align: left;
	font-family: PingFangSC-bold;
	line-height: 100rpx;
}
	/* 业务分类 */
	.list {
		margin: 0 auto;
		width: 600rpx;
		height: 300rpx;
	}

	.nav {
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
	}

	.nav_item {
		width: 25%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		text-align: center;
	}

	.nav_item text {
		color: rgba(150, 150, 150, 100);
		font-size: 20rpx;
		text-align: left;
		margin: 0 auto;
		font-family: PingFangSC-regular;

	}

	.nav_item image {
		margin: 0 auto;
		width: 48rpx;
		height: 48rpx;

	}
</style>
